import React, { useState, useEffect } from 'react'
import { Row, Col, Typography, Space, Badge } from 'antd'
import { 
  WifiOutlined, 
  ThunderboltOutlined, 
  ClockCircleOutlined 
} from '@ant-design/icons'
import { useWebSocket } from '../../hooks/useWebSocket'

const { Text } = Typography

const SyncStatus = () => {
  const { connected, connectionStatus, pendulumState } = useWebSocket()
  const [performance, setPerformance] = useState({
    fps: 0,
    latency: 0
  })

  // 计算性能指标
  useEffect(() => {
    if (pendulumState) {
      // 计算FPS（这里简化处理，实际应该基于接收频率计算）
      const now = performance.now()
      const fps = pendulumState.fps || 0
      const latency = pendulumState.latency || 0
      
      setPerformance({
        fps: Math.round(fps),
        latency: Math.round(latency)
      })
    }
  }, [pendulumState])

  const getConnectionStatus = () => {
    switch (connectionStatus) {
      case 'connected':
        return {
          status: 'success',
          text: '🟢 WebSocket已连接',
          color: '#4caf50'
        }
      case 'connecting':
        return {
          status: 'processing',
          text: '🟡 正在连接...',
          color: '#ff9800'
        }
      case 'disconnected':
        return {
          status: 'default',
          text: '🟡 WebSocket已断开',
          color: '#ffc107'
        }
      case 'error':
        return {
          status: 'error',
          text: '❌ WebSocket错误',
          color: '#f44336'
        }
      default:
        return {
          status: 'default',
          text: '🟡 等待连接',
          color: '#ffc107'
        }
    }
  }

  const getFPSStatus = () => {
    if (performance.fps >= 25) {
      return { color: '#4caf50', status: 'success' }
    } else if (performance.fps >= 15) {
      return { color: '#ff9800', status: 'warning' }
    } else {
      return { color: '#f44336', status: 'error' }
    }
  }

  const getLatencyStatus = () => {
    if (performance.latency <= 50) {
      return { color: '#4caf50', status: 'success' }
    } else if (performance.latency <= 150) {
      return { color: '#ff9800', status: 'warning' }
    } else {
      return { color: '#f44336', status: 'error' }
    }
  }

  const connectionInfo = getConnectionStatus()
  const fpsInfo = getFPSStatus()
  const latencyInfo = getLatencyStatus()

  return (
    <div className="sync-status">
      <Row gutter={[0, 12]}>
        {/* 连接状态 */}
        <Col span={24}>
          <div className="status-item">
            <Space>
              <WifiOutlined style={{ color: connectionInfo.color }} />
              <Text style={{ color: '#b0bec5', fontSize: '12px' }}>状态:</Text>
              <Badge 
                status={connectionInfo.status} 
                text={
                  <Text style={{ color: connectionInfo.color, fontSize: '12px' }}>
                    {connectionInfo.text}
                  </Text>
                }
              />
            </Space>
          </div>
        </Col>
        
        {/* FPS显示 */}
        <Col span={24}>
          <div className="status-item">
            <Space>
              <ThunderboltOutlined style={{ color: fpsInfo.color }} />
              <Text style={{ color: '#b0bec5', fontSize: '12px' }}>FPS:</Text>
              <Text 
                style={{ 
                  color: fpsInfo.color, 
                  fontSize: '14px',
                  fontFamily: 'monospace',
                  fontWeight: 'bold'
                }}
              >
                {performance.fps}
              </Text>
            </Space>
          </div>
        </Col>
        
        {/* 延迟显示 */}
        <Col span={24}>
          <div className="status-item">
            <Space>
              <ClockCircleOutlined style={{ color: latencyInfo.color }} />
              <Text style={{ color: '#b0bec5', fontSize: '12px' }}>延迟:</Text>
              <Text 
                style={{ 
                  color: latencyInfo.color, 
                  fontSize: '14px',
                  fontFamily: 'monospace',
                  fontWeight: 'bold'
                }}
              >
                {performance.latency}ms
              </Text>
            </Space>
          </div>
        </Col>
        
        {/* 性能指示器 */}
        <Col span={24}>
          <div className="performance-indicators">
            <Row gutter={8}>
              <Col span={8}>
                <div className={`indicator-bar ${connectionInfo.status}`}>
                  <div className="indicator-label">连接</div>
                  <div 
                    className="indicator-fill"
                    style={{ 
                      width: connected ? '100%' : '0%',
                      backgroundColor: connectionInfo.color
                    }}
                  />
                </div>
              </Col>
              <Col span={8}>
                <div className={`indicator-bar ${fpsInfo.status}`}>
                  <div className="indicator-label">帧率</div>
                  <div 
                    className="indicator-fill"
                    style={{ 
                      width: `${Math.min(performance.fps / 30 * 100, 100)}%`,
                      backgroundColor: fpsInfo.color
                    }}
                  />
                </div>
              </Col>
              <Col span={8}>
                <div className={`indicator-bar ${latencyInfo.status}`}>
                  <div className="indicator-label">延迟</div>
                  <div 
                    className="indicator-fill"
                    style={{ 
                      width: `${Math.max(100 - performance.latency / 200 * 100, 0)}%`,
                      backgroundColor: latencyInfo.color
                    }}
                  />
                </div>
              </Col>
            </Row>
          </div>
        </Col>
      </Row>
    </div>
  )
}

export default SyncStatus
